<template>
	<view class="body">
		<!-- 上方卡片 -->
		<view class="body-card">
		  <!-- 左侧：赚钱排行榜 -->
		  <view class="card left-card">
		    <view class="card-header">
		      <text class="card-title">赚钱排行榜</text>
		    </view>
		    <view class="card-content">
		      <view class="earn-item">小赚8元</view>
		      <view class="earn-item">小赚无</view>
		    </view>
		    <view class="card-button go-view" @click="goToRamking">去看看</view>
		  </view>
		
		  <!-- 右侧：认证马上赚 -->
		  <view class="card right-card">
		    <view class="card-header">
		      <text class="card-title">认证马上赚</text>
		    </view>
		    <view class="card-content">
		      <text class="cert-desc">完成认证即可接单</text>
		      <text class="cert-desc">顺路帮忙还赚钱！</text>
		    </view>
		    <view class="card-button go-auth">去认证</view>
		  </view>
		</view>
		<!-- 菜单栏 -->
		<view class="body-menu">
			<run-menu @column-select="handleColumnSelect"></run-menu>
		</view>
		<!-- 警告提示 -->
		<up-notice-bar :text="text1" class="prompt"></up-notice-bar>
		
		<!-- 帖子 -->
		<view class="body-post">
			<run-cards :cards="cards"></run-cards>
		</view>
		<!-- 加载中提示 -->
		<view v-if="loading" class="loading">加载中...</view>
		<!-- 没有更多数据提示 -->
		<view v-if="!hasMore && !loading" class="no-more">没有更多数据了</view>
	</view>
	<custom-tabbar />
</template>


<script setup lang="ts">
	import { ref, onMounted, computed } from "vue";
	import { onLoad, onShow, onReachBottom } from "@dcloudio/uni-app"
	import CustomTabbar from '@/components/custom-tab-bar/my-custom-tab-bar.vue'
	import { Test, getRunList } from "../../apis/runAPI";
	let test = ref()
	const pageSize = ref(3);
	const pageNum = ref(1);
	const cards = ref([]);
	const loading = ref(false); // 是否正在加载
	const hasMore = ref(true); // 是否还有更多数据
	const data = ref({
		pageNum: pageNum.value,
		pageSize: pageSize.value,
		state: '',
		userId: '',
		takeUserId: ''
	})
	const text1 = ref("请勿相信引导线下交易，线下交易无法跟踪被骗自负~~~")
	//跳转页面
	const goToRamking = () =>{
		uni.navigateTo({
		    url: `/pages/ranking/ranking`
		  });
	}
	// 处理子组件传递的选中值
	const handleColumnSelect = (value) => {
		console.log('父组件接收的选中状态：', value); // 例如：['选项7']
		//获取用户id当前用户的信息并赋值
		const userInfo = uni.getStorageSync('userInfo');
		console.log("yonghuxinxi10",userInfo)
		const userIdNow = userInfo.userId
		console.log("userIdNow", userIdNow)
		// 清空
		cards.value = []
		data.value.pageNum = 1;
		hasMore.value = true;
		data.value.state = '';
		data.value.userId = '';
		data.value.takeUserId = '';

		switch (value.index) {
			case 0:
				// 全部任务：无需额外条件
				data.value.state = value.selectedValue != 10 ? value.selectedValue : '';
				break;
			case 1:
				// 我的发布：筛选发布者为当前用户
				data.value.takeUserId = userIdNow;
				data.value.state = value.selectedValue != 10 ? value.selectedValue : '';
				break;
			case 2:
				// 我的接受：筛选接受者为当前用户
				data.value.userId = userIdNow;
				data.value.state = value.selectedValue != 10 ? value.selectedValue : '';
				break;
		}
		// 4. 调用loadData重新加载数据
		loadData();
	};

	// 加载数据的通用函数
	const loadData = async () => {
		// 防止重复加载或无更多数据时请求
		if (loading.value || !hasMore.value) return;

		loading.value = true; // 开始加载
		try {
			const res : any = await getRunList(data.value);
			const newData = res.data.data.list || [];
			const total = res.data.data.total; // 假设后端返回总条数total
			// 第一页直接替换数据，后续页追加数据
			if (data.value.pageNum === 1) {
				cards.value = newData;
			} else {
				cards.value = [...cards.value, ...newData];
			}

			 // 关键优化：通过总条数判断是否还有更多数据
			const totalLoaded = data.value.pageNum * data.value.pageSize;
			hasMore.value = totalLoaded < total; // 已加载总数 < 总条数 → 还有更多
		} catch (err) {
			console.error("加载失败", err);
		} finally {
			loading.value = false; // 结束加载
		}
	};

	// 初始化加载第一页数据
	onLoad(() => {
		loadData();
	});

	// 上拉触底事件：加载下一页数据
	onReachBottom(() => {
		if (!loading.value && hasMore.value) {
			data.value.pageNum++; // 页码+1
			loadData(); // 加载下一页
			console.log("carrrr", cards)
		}
	});
</script>

<style lang="scss">
	// 颜色变量
	$bg-gradient: linear-gradient(135deg, #E6F9E6, #F5F9E6); // 顶部渐变背景
	$text-black: #000;
	$card-left-bg: #E6F9E6; // 赚钱排行榜背景
	$card-right-bg: #FFF3C0; // 认证卡片背景
	$button-green: #4CD964; // 去看看按钮
	$button-yellow: #FFD700; // 去认证按钮
	$menu-active: #000; // 菜单选中颜色
	$menu-inactive: #999; // 菜单未选中颜色
	$prompt-bg: #F0F0F0; // 警告提示背景
	$task-item-bg: #FFF; // 任务项背景
	$bottom-nav-bg: #FFF; // 底部导航背景
	$bounty-red: #FF4444; // 赏金颜色

	// 全局样式
	.body {
		background: #F5F9F5; // 页面整体背景
		min-height: 100vh;
	}

	.body-bar {
		height: 20rpx;
		width: 100%;
	}

	// 原有样式不变，新增加载提示样式
	.loading {
		padding: 20rpx 0;
		text-align: center;
		color: #666;
		font-size: 14px;
	}

	.no-more {
		padding: 20rpx 0 40rpx; // 底部留空，避免被导航栏遮挡
		text-align: center;
		color: #999;
		font-size: 14px;
	}

	// 标题栏
	.body-top {
		padding: calc(var(--status-bar-height) + 10px) 20px 10px;
		background: $bg-gradient;
		display: flex;
		justify-content: flex-start;
		align-items: center;

		text {
			font-size: 24px;
			font-weight: bold;
			color: $text-black;
		}

		// 右侧胶囊按钮（小程序默认，无需额外样式）
	}

	// 上方卡片容器
	.body-card {
	  padding: 20rpx;
	  display: flex;
	  gap: 20rpx; // 左右卡片间距
	}
	
	// 通用卡片样式
	.card {
	  flex: 1; // 左右卡片各占一半宽度
	  border-radius: 15rpx;
	  padding: 20rpx;
	  position: relative; // 用于定位底部按钮
	  display: flex;
	  flex-direction: column;
	  justify-content: space-between; // 内容区与按钮上下分离
	}
	
	// 左侧卡片（赚钱排行榜）
	.left-card {
	  background: linear-gradient(135deg, #E6F9E6, #D5F5D5); // 浅绿色渐变
	}
	
	// 右侧卡片（认证马上赚）
	.right-card {
	  background: linear-gradient(135deg, #FFF3C0, #FFEE99); // 浅黄色渐变
	}
	
	// 卡片头部（标题区）
	.card-header {
	  display: flex;
	  align-items: center;
	  margin-bottom: 20rpx;
	}
	
	.card-title {
	  font-size: 24rpx;
	  font-weight: bold;
	  color: #333;
	}
	
	.card-subtitle {
	  font-size: 20rpx;
	  color: #666;
	  margin-left: 10rpx;
	}
	
	// 卡片内容区（中间文字）
	.card-content {
	  margin-bottom: 40rpx; // 给底部按钮留空间
	}
	
	.earn-item {
	  font-size: 24rpx;
	  color: #333;
	  margin-bottom: 10rpx;
	}
	
	.cert-desc {
	  font-size: 20rpx;
	  color: #666;
	  line-height: 1.5;
	  display: block; // 让两行文字换行显示
	}
	
	// 卡片按钮（底部）
	.card-button {
	  position: absolute;
	  bottom: 20rpx;
	  right: 20rpx;
	  padding: 10rpx 20rpx;
	  border-radius: 10rpx;
	  color: #fff;
	  font-size: 24rpx;
	}
	
	// 左侧按钮（去看看）
	.go-view {
	  background-color: #4CD964; // 绿色
	}
	
	// 右侧按钮（去认证）
	.go-auth {
	  background-color: #FFD700; // 黄色
	}
	

	// 菜单栏
	.body-menu {
		padding: 20rpx 20rpx;
	}

	// 警告提示
	.prompt {
		background: $prompt-bg;
		padding: 12px 20px;
		border-radius: 10px;
		display: flex;
		align-items: center;
		gap: 10px;

		.icon {
			width: 20px;
			height: 20px;
			// background: url('@/static/icons/bell.png') no-repeat center;
			background-size: 100%;
		}

		text {
			font-size: 14px;
			color: #666;
		}
	}

	// 任务列表
	.body-post {
		.task-item {
			background: $task-item-bg;
			border-radius: 12px;
			padding: 15px 20px;
			margin: 15px 0;
			box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);

			.user-info {
				display: flex;
				align-items: center;
				gap: 12px;
				margin-bottom: 10px;

				.avatar {
					width: 45px;
					height: 45px;
					border-radius: 50%;
				}

				.nickname {
					font-size: 16px;
					font-weight: bold;
				}

				.auth-tag {
					background: #FFD700;
					color: #FFF;
					padding: 3px 8px;
					border-radius: 5px;
					font-size: 12px;
					margin-left: 5px;
				}

				.grade {
					font-size: 14px;
					color: #999;
					margin-top: 3px;
				}

				.time {
					margin-left: auto;
					font-size: 14px;
					color: #999;
				}
			}

			.task-title {
				display: flex;
				align-items: center;
				gap: 10px;
				margin-bottom: 10px;

				.task-icon {
					width: 35px;
					height: 35px;
					border-radius: 8px;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #FFF;
					font-size: 18px;
				}

				.title-text {
					font-size: 18px;
					font-weight: bold;
				}

				.bounty {
					margin-left: auto;
					font-size: 18px;
					color: $bounty-red;
					font-weight: bold;
				}
			}

			.task-desc {
				font-size: 14px;
				color: #666;
				line-height: 1.5;
				margin-bottom: 10px;
			}

			.task-stats {
				display: flex;
				align-items: center;
				gap: 25px;
				color: #999;
				font-size: 14px;

				.view-count,
				.like-count {
					display: flex;
					align-items: center;
					gap: 5px;
				}
			}
		}
	}

	// 底部导航栏
	.bottom-nav {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: $bottom-nav-bg;
		padding: 10px 20px;
		display: flex;
		justify-content: space-around;
		align-items: center;
		box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.08);

		.nav-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 5px;

			.icon {
				width: 30px;
				height: 30px;
				background-size: 100%;
			}

			.text {
				font-size: 12px;
				color: $text-black;
			}
		}

		.central-icon {
			width: 50px;
			height: 50px;
			border-radius: 50%;
			background: #000;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #FFF;
			font-size: 24px;
			margin-top: -20px; // 悬浮效果
		}
	}
</style>